<div>
	<div class="table" ng-controller="ExtraAcademicsEditableGrid">
		<div class="panel panel-primary">
			<!-- Default panel contents -->
			<!-- <div class="panel-heading">Search</div> -->
			<div class="panel-body">
			<form novalidate class="simple-form">
				<table class="table table-condensed">
					<tr>
						<td width="5%">Grade</td>
						<td width="10%"><select class="form-control input-sm" ng-model="searchCriteria.gradeId" ng-change="criteriaChanged()" ng-options="c.id as c.value for c in gradeList"></select></td>
						<td width="5%"></td>
						<td><button type="button" class="btn btn-success btn-sm" ng-click="getDetails()">Get Details</button></td>
					</tr>
				</table>
			</form>
			</div>
		</div>
		<div class="panel panel-primary" ng-show="showGrid">
		<!-- Button trigger modal -->
			<!-- Default panel contents -->
			<div class="panel-heading">Student Extra Academics Details</div>
			<div class="panel-body">
				<table class="table">
					<tr>
						<td colspan="8">
							<div class="table">
								<div>
									<form editable-form name="studentExtraAcademicsForm" onaftersave="saveTable()" oncancel="cancel()">
										<!-- table -->
										<table
											class="table table-bordered table-hover table-condensed">
											<tr style="font-weight: bold; background-color: #f4f4f4;">
												<td style="width: 20%">Certification/Award</td>
												<td style="width: 7%">Date</td>
												<td style="width: 7%">School Rank</td>
												<td style="width: 7%">State Rank</td>
												<td style="width: 7%">All India Rank</td>
												<td style="width: 7%">Weightage</td>
												<td style="width: 20%">Remarks</td>
												<td style="width: 5%">Certificate</td>
												<td style="width: 20%" ng-show="studentExtraAcademicsForm.$visible"><span ng-show="studentExtraAcademicsForm.$visible">Action</span></td>
											</tr>
											<tr
												ng-repeat="extraAcademicsVo in extraAcademicsVos | filter:filterExtraAcademics">
												<td><span editable-select="extraAcademicsVo.certificationId" e-form="studentExtraAcademicsForm" e-ng-options="s.id as s.certificationName for s in certificationList">{{showCertificates(extraAcademicsVo)}}</span></td>
												<td><span editable-bsdate="extraAcademicsVo.dated" e-datepicker-popup="dd-MMMM-yyyy" e-form="studentExtraAcademicsForm"> {{(extraAcademicsVo.dated | date:"dd/MM/yyyy") || 'empty' }} </span></td>
												<td><span editable-text="extraAcademicsVo.schoolRank" e-form="studentExtraAcademicsForm"> {{ extraAcademicsVo.schoolRank || 'Not Specified' }} </span></td>
												<td><span editable-text="extraAcademicsVo.stateRank" e-form="studentExtraAcademicsForm"> {{ extraAcademicsVo.stateRank || 'Not Specified' }} </span></td>

												<td><span editable-text="extraAcademicsVo.allIndiaRank" e-form="studentExtraAcademicsForm"> {{ extraAcademicsVo.allIndiaRank || '' }} </span></td>
												<td><span editable-text="extraAcademicsVo.attributeWeightage" e-form="studentExtraAcademicsForm"> {{ extraAcademicsVo.attributeWeightage || '' }} </span></td>
												<td><span editable-textarea="extraAcademicsVo.remark" e-form="studentExtraAcademicsForm"> {{ extraAcademicsVo.remark || '' }} </span></td>
												
												<td><a ng-show="extraAcademicsVo.certificateAttachmentId>0" target="_self" ng-href="/mc-mvc/admin/handleRequest/filedownload/{{extraAcademicsVo.certificateAttachmentId}}">
													<button class="btn btn-success btn-sm" type="button">Download</button>
												</a></td>
												<td ng-show="studentExtraAcademicsForm.$visible">
													<span>
														<a ng-show="studentExtraAcademicsForm.$visible" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-success" ng-click="initFileParams(searchCriteria,{recordType:'EXTRA_ACADEMICS'},handleAttachImage,extraAcademicsVo)">Attach Cert</a>
														<button type="button" ng-show="studentExtraAcademicsForm.$visible" ng-click="deleteExtraAcademicsRow(extraAcademicsVo.cid, extraAcademicsVo.sid)" class="btn btn-sm btn-danger">Del</button>
													</span>
												</td>
											</tr>
										</table>
										<!-- buttons -->
										<div class="btn-edit">
											<button type="button" class="btn btn-default" ng-show="!studentExtraAcademicsForm.$visible" ng-click="studentExtraAcademicsForm.$show()">edit</button>
										</div>
										<div class="btn-form" ng-show="studentExtraAcademicsForm.$visible">
											<button type="button" ng-disabled="studentExtraAcademicsForm.$waiting" ng-click="addExtraAcademicsRow()" class="btn btn-default pull-right">add row</button>
											<button type="submit" ng-disabled="studentExtraAcademicsForm.$waiting" class="btn btn-primary">save</button>
											<button type="button" ng-disabled="studentExtraAcademicsForm.$waiting" ng-click="studentExtraAcademicsForm.$cancel()" class="btn btn-default">cancel</button>
										</div>
									</form>
								</div>
							</div>
						</td>
					</tr>
				</table>
				<div class="panel  panel-default">
					<div class="panel-heading">
						Recommendations
						<button data-toggle="modal" data-target="#recommendationModule" class="btn btn-sm btn-success pull-right" ng-click="initRecommendations(searchCriteria)">Add recommendations</button>
					</div>
					<div class="Panel-body">
						<div style="font-size: 12px">
							<div ng-show="showRecommendation==true">
								<p class="message " ng-repeat="row in recommendations">
									<a class="name" href="#" data-toggle="modal" data-target="#recommendationModule" ng-click="initRecommendations(searchCriteria,row)">{{row.recommendationtitle || 'No Title'}}</a><br> <span ng-attr-id="{{ 'rdiv-' + $index }}">{{row.recommendationText || 'No Text'}}</span>
								</p>
							</div>
							<div class="row" ng-show="showRecommendation==false">No Recommendations Added</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>